<template>

    <div>
        <Tablefilter :filter="filterModel" @search="search" @del="delTable()" @add="addTable()"  ></Tablefilter>

        <commonTable :getTableList="getTableList()"
                     :refresh.sync="refresh"
                     :filter="filter"
                     :selectRow.sync="selectRow"
                     :changeRow.sync="changeRow"
                     :columns="columns">
        </commonTable>
        <storeEdit ref="storeEdit" :data="editData"
                   :refresh.sync="refresh"
                   :changeRow.sync="changeRow" ></storeEdit>
    </div>
</template>

<script>

    import Tablefilter from '../components/table/commonTableFilter'
    import commonTable from '../components/table/commonTable'
    import storeEdit from './storeEdit'

    export default {
        name: "storeList",
        components: {
            Tablefilter,
            storeEdit,
            commonTable
        },
        data() {
            return {
                selectRow: [],
                editData: {},
                filter: {},
                changeRow: {},
                refresh: false,
                columns: [
                    {label: this.$t('common.operate'), prop: 'operate', render: this.render('operate'), width: 90, tooltip: false,fixed:'right'},
                    {type: 'selection', width: 55},
                    {label: this.$t('common.productId'), prop: 'productId', width: 70},
                    {label: this.$t('common.productName'), prop: 'productName'},
                    {label: this.$t('common.attr'), prop: 'property', render: this.render('property')},
                    {label:  this.$t('common.wareHouseName'), prop: 'wareHouseName'},
                    {label:  this.$t('common.checkedCounts'), prop: 'checkedCounts'},
                    {label:  this.$t('common.unCheckedCounts'), prop: 'unCheckedCounts'},
                    {label:  this.$t('common.storageCounts'), prop: 'storageCounts'},
                    {label:  this.$t('common.shipCounts'), prop: 'shipCounts'},
                    // {label:  this.$t('common.purchase'), prop: 'purchase'},
                ],
                filterModel: {
                    productId: {
                        label: this.$t('common.productId'),
                        value: '',
                    },
                    productName: {
                        label: this.$t('common.productName'),
                        value: '',
                    },
                },
            }
        },
        methods: {
            search(filter) {
                this.filter = filter
                this.refresh = true
            },
            addTable(data) {
                if(data){
                    this.editData = Object.assign({},data)
                }else{
                    this.editData = Object.assign({},{})
                }
                setTimeout(()=>{
                    this.$refs.storeEdit.changeVisiable()
                },100)
            },
            delTable(Id) {
                let params = Id ? [Id] : this.selectRow.map(v => {
                    return v.id
                })
                this.$storeDel(params).then(response => {
                    if (response.code === 'success') {
                        this.$message.success(this.$t('common.delSuccess'))
                        this.refresh = true
                        this.selectRow = []
                    } else {
                        this.$message.error(this.$t('common.delError'))
                    }
                })
            },
            getTableList() {
                return this.$storeList
            },
            render(prop) {
                let render = {}
                if (!prop) return;
                render.property  =(h, params) => {
                    let render = ''
                    if (params.row.property) {
                        let attr = JSON.parse(params.row.property)
                        for(let i in attr){
                            if(attr[i]){
                                render =  render?render+','+attr[i]:attr[i]
                            }
                        }
                    }
                    return h('div', render)
                }
                render.operate = (h, params) => {
                    return h('div', [
                        h("el-button",
                            {
                                props: {
                                    type: 'warning',
                                    size: 'mini'
                                },
                                style: {
                                    marginLeft: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.addTable(params.row)
                                    }
                                }
                            },
                            this.$t('common.edit')
                        )
                    ])
                }
                return render[prop]
            },
            storeAll(){
                let params = {
                    pageSize: 99999,
                    currentPage: 1,
                }
                this.$storeAll(params).then(response=>{
                    if(response.data){
                        let warehouseOptions=[]
                        response.data.forEach((v)=>{
                            let option = {
                                value:v.id,
                                label:v.wareHouseName,
                            }
                            warehouseOptions.push(option)
                        })
                        this.$store.commit('saveWarehouse',warehouseOptions)
                    }
                })
            },


        },
        mounted(){
            this.storeAll()
        }
    }
</script>

<style lang="less">
    .tableInfo{
        div{
            padding-right: 20px;
            display: inline-block;
        }
    }
    .error-row{
        background-color: #f56c6c !important;
    }
    .info-row{
        background-color: #409eff !important;
    }
    .success-row{
        background-color: #67c23a !important;
    }
    .striped-row{
        background-color: #FAFAFA !important;
    }
    body .el-table__fixed-right{
        top:0.5px
    }
</style>